<template>
  <div>
  <el-table
      :data="tableData"
      style="width: 100%">
    <el-table-column
        prop="name"
        label="姓名"
        width="180">
    </el-table-column>
    <el-table-column
        prop="age"
        label="年龄"
        width="180">
    </el-table-column>
    <el-table-column
        prop="sex"
        label="性别"
        width="180">
    </el-table-column>
    <el-table-column
        prop="phone"
        label="电话"
        width="180">
    </el-table-column>
    <el-table-column
        prop="city"
        label="城市"
        width="180">
    </el-table-column>
  </el-table>

  <div class="block">
    <span class="demonstration">完整功能</span>
    <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="this.query.page"
        :page-sizes="[5, 10, 15, 20]"
        :page-size="this.query.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="this.total">
    </el-pagination>
  </div>
  </div>
</template>

<script>
export default {
  name: "myView",
  data() {
    return {
      tableData: [],
      total:8,
      query:{
        page:1,
        size:5,
      }
    }
  },
  mounted() {
    this.getList();
  },
  methods: {
    getList(){
      this.axios.get('http://localhost:8989/user/getList',{
        params:{
          page:this.query.page,
          size:this.query.size,
        }
      }).then((resp)=>{
            console.log(resp);
            this.tableData=resp.data.content.list;
            this.total=resp.data.content.total;
          }
      )
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`);
      this.query.size=val;
      this.getList();
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
      this.query.page=val;
      this.getList();
    }
  }

}
</script>

<style scoped>

</style>